﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>lyb</title>

    <link rel="shortcut icon" href="./images/favicon.jpg"/>
    <!-- Bootstrap -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <!--自己的css文件-->
    <link rel="stylesheet" href="./css/index.css"/>
    <!--<link rel="stylesheet" href="./css/animate.css"/>-->
    <link rel="stylesheet" href="./css/liuyanban.css"/>
    <link rel="stylesheet" href="./css/animate.css"/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="./js/html5shiv.min.js"></script>
    <script src="./js/respond.js"></script>
    <![endif]-->
    <style>
        #loginTip{
            width: 50%;
            height: 250px;
            line-height: 250px;
            background-color: lightgreen;
            color: palevioletred;
            font-size: 24px;
            text-align: center;
            position: absolute;
            top: 150px;
            left: 40%;
            margin-left: -15%;
            border-radius: 50px;
            color: #FFFFFF;
            display: none;
        }
        #mask{
            height: 700px;
            background-color: rgba(0,0,0,0.5);
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            z-index: 200;
            display: none;

        }
        #close{
            position: absolute;
            top: 15px;
            right: 20px;
            width: 50px;
            height: 50px;
            display: block;
            background-color: rgba(0, 0, 0, 0.5);
            line-height: 50px;
            cursor: pointer;
        }
    </style>

</head>
<body>

<!--------------------顶部导航开始--------------------->
<nav class="navbar navbar-default myNav home">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand basicInfo" href="index2.html">首页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav basicShow">
                <li class="basic current"><a href="showInfo.html">个人简历 </a></li>
                <li><a href="#">我的生活</a></li>
                <li><a href="#">留言板</a></li>
                <li><a href="#">我爱旅行</a></li>
                <!--<li><a href="#">我的关注</a>-->
                <li class="dropdown" id="myCare">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">我的关注
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="subHtml/movies.html">电影</a></li>
                        <li><a href="#">IT</a></li>
                        <li><a href="#">音乐</a></li>

                    </ul>
                </li>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="./login.html" class="login">登录</a></li>
                <li><a href="javascript:;" class="logout">退出</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>
</nav>

<!--------------------顶部导航结束--------------------->

<!----------------填写留言内容开始------------------->
<div id="allLyb">
    <div class="lyb" id="lyb">
        <!--<input type="text" id="lbyInput"/>-->
        <textarea name="" id="lbyInput" cols="30" rows="10" placeholder="说点什么吧...."></textarea>
    </div>
    <a id="public" href="javascript:;">发布</a>
</div>
<!----------------填写留言结束----------------->


<!-------------------显示所有留言--------------------->

<div id="allMessages">
    <script type="text/template" id="tpl">
        <% for(var i = 0; i < lbyMessages.length;i++){%>
        <div class="ly">
            <img id="touxiang" src="<%=lbyMessages[i].img%>"/>
            <span class="user"><%=lbyMessages[i].username%>：</span>

            <p id="message"><%=lbyMessages[i].message%></p>

            <p id="public_date"><%=lbyMessages[i].date%></p>
        </div>

        <%}%>
    </script>


</div>

<!-------------------显示所有留言--------------------->



<!----------------------未登录提示------------------->

<div id="mask">
    <div id="loginTip">
        亲，登录后才能留言哦！
        <div id="close">X</div>
    </div>
</div>
<!----------------------未登录提示------------------->



<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/jquery-1.12.2.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!--<script src="lib/bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>-->
<script src="./js/template-native.js"></script>
<script>

    $(function () {

        //留言板信息
        var lyb_messages = [
            {
                img: './images/touxiang1.jpg',
                username: 'zs',
                message: '不错哦，继续努力不错哦，继续努力不错哦，继续努力不错哦，继续努力不错哦，继续努力不错哦，继续努力不错哦，继续努力不错哦，继续努力不错哦，继续努力',
                date: '2016-1-2'
            },
            {img: './images/touxiang2.jpg', username: 'ls', message: '哈哈哈', date: '2016-5-2'},
            {img: './images/touxiang3.jpg', username: 'ww', message: '呵呵呵', date: '2016-3-2'},

        ];

        //页面初始加载完以后调用显示留言板信息
        renderMessage();
        function renderMessage() {

            //利用模版引擎将留言板信息显示到页面
            var lyb_messagesObj = {
                lbyMessages: lyb_messages
            }

            var html = template("tpl", lyb_messagesObj);
            $("#allMessages").html(html);
        }


        //点击发表按钮时，将textarea里的内容添加到数组里
        $("#public").on("click", function () {
            var newMessage = $("#lbyInput").val();
            //获取当前登录用户信息
            var username = sessionStorage.username;
            if(!username){
//                alert("亲，先登录才能发表留言哟");
                $("#mask").css("display","block");
                $("#close").css("display","block");
                $("#loginTip").css("display","block").addClass("animated bounceInDown");
                $("#close").on("click",function(){
                    $(this).css("display","none");
                    $("#mask").css("display","none");
                })
                return;
            }
            var obj = {};
            obj.username = username;
            obj.img = sessionStorage.img;
            obj.message = newMessage;
            //获取当天日期
            var year = new Date().getFullYear();
            var month = new Date().getMonth();
            var date = new Date().getDate();
            obj.date = year + "-" + month + "-" + date;

            //将填写的留言添加到数组最前面
            lyb_messages.unshift(obj);
            renderMessage();
            $("#lbyInput").val("");

            console.log(sessionStorage.img);
        })


        $(".logout").on("click",function(){

            location.href = './login.html';
            sessionStorage.username = '';
            sessionStorage.password = '';
            sessionStorage.img = '';
            sessionStorage.userId = '';

        });

    })

</script>
</body>
</html>